<template>
    <div class="registerContain">
        <mt-header title="注册" class="head"  id="headId">
            <router-link to="/" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>


        <div class="context">
                <form class="mui-input-group" id="fromId">
                    <div class="mui-input-row contextItem">
                        <label>账号</label>
                        <input type="text"  placeholder="请输入邮箱号作为账号" @blur="verifyBlur('email',email,'emailErrorMsg')"   v-model="email">
                    </div>
                    <div class="errorMsg" v-show="verifyResult.emailErrorMsg != null" ><span>{{verifyResult.emailErrorMsg}}</span></div>  
                    
                    <div class="mui-input-row contextItem">
                        <label>密码</label>
                        <input type="password"  placeholder="请输入密码" @blur="verifyBlur('notNull',password,'passwordErrorMsg')"  v-model="password">
                    </div>
                    <div class="errorMsg" v-show="verifyResult.passwordErrorMsg != null" ><span>{{verifyResult.passwordErrorMsg}}</span></div>

                    <div class="mui-input-row contextItem">
                        <label>手机号码</label>
                        <input type="text"  placeholder="请输入手机号码" @blur="verifyBlur('phone',phone,'phoneErrorMsg')"  v-model="phone">
                    </div>
                    <div class="errorMsg" v-show="verifyResult.phoneErrorMsg != null" ><span>{{verifyResult.phoneErrorMsg}}</span></div>


                     <div class="mui-input-row phoneVer contextItem"  >
                        <label>验证码</label>
                        <input type="text"  placeholder=""  >
                        <button class="mui-btn mui-btn-primary">获取验证码</button>
                    </div>


                </form>

                <div class="contextXLD">
                    <p>注册代表你已同意《小老弟用户协议》</p>
                </div>

                <mt-button @click="registSubmit()" id="registerButton" size="large" type="primary">注册</mt-button>
        </div>


    </div>


    
</template>

<script>
import { Toast } from 'mint-ui';
export default {

    data(){
        return {
            verifyList:verifyList,
            verifyResult:{},
            userName:"",
            password:"",
            phone:"",
            
        }
    },
  
    methods:{
        verifyBlur(verfiy,vaule,resultMsgName){
            let fun =  this.verifyList[verfiy];
            if(fun == null){
                return ;
            }
            let verifyMsg = fun(vaule);
            this.$set(this.verifyResult,resultMsgName,verifyMsg)
        },
        registSubmit(){

            for(vitemKey in this.verifyResult){
                let value = this.verifyResult[vitemKey];
                if(value != null){
                    Toast(`请正确填写参数:${value}`);
                    return;
                }
            }

            let data={
                email:this.email,
                password:this.password,
                phone:this.phone
            }
            this.$http.post("user/save",data).then(res=>{
                if(!res.ok ){
                    Toast("注册信息失败");
                    return;
                }
                let body = res.body;
                if(!body.success){
                    Toast(body.msg);
                    let errorData = body.data;
                    if(errorData != null){
                        let code = errorData.code;
                        let errorMsg = errorData.msg;
                        if(code == 1){
                            this.$set(this.verifyResult,"emailErrorMsg",errorMsg);
                        }else{
                            this.$set(this.verifyResult,"phoneErrorMsg",errorMsg);
                        } 
                    }

                    return;
                }
                Toast("注册成功");
                this.$router.push({
                    name:"login"
                });                

            });
        }
    } 
}

let verifyList = {
    email(value){
        if(value == null || value == ""){
            return "账号不能为空";
        }
       reuslt =  value.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
        if(reuslt == null){
            return "账号格式不正确";
        }
        return null
    },
    phone(value){
         if(value == null || value == ""){
             return "手机号码不能为空";
        }
       reuslt =  value.match(/^1(3|4|5|7|8)\d{9}$/)
        if(reuslt == null){
            return "手机号码不正确";
        }
        return null
    },
    notNull(value){
         if(value == null || value == ""){
            return "该项不能为空";
        }
        return null;
    }
}
            
</script>


<style scoped>
    .head{
        overflow: hidden;
    }
    .context{
        padding: 15px;
    }

      .mui-input-group:before{
       height: 0px;
    }

    .mui-input-group:after{
       height: 0px;
    }
    #fromId{
        margin-bottom: 20px;
    }

    .phoneVer{
        display: flex;
        justify-content: space-between;
    }

    .phoneVer input{
        width: 120px;
    }

    .phoneVer button{
        width: auto;
    }

    .contextItem{
        margin-top: 10px;
    }

     #registerButton{
        background-color: #1caf0a;
    }

    .contextXLD{
        margin-top: 5px;
         width: 97%;
        text-align: center;
    }

    .contextXLD p{
        font-size: 12px;
    }
    .errorMsg{
        display: flex;
        color: red;
        justify-content: space-around;
        font-family: sans-serif;
        font-size: 12px;
    }
    
    

</style>

<style>

.head .mint-header-title{
        font-size: 20px;
        font-weight: bold;
    }

</style>


